<template>
    <view-box style="background:#F3F6F7;">
        <div style="height:10px;"></div>
        <div class="border-workpls" style="display: flex;">
            <div class="x-circle-coln">
                <x-circle :percent="percent/10"  :stroke-width="3" trail-color="#bd4e4d" anticlockwise="true" stroke-color="#f06161">
                    <div class="border-circle-clo">
                        <p>{{ percent }}</p>
                    </div>
                </x-circle>
            </div>
            <div class="wid-lop">
                <P style="width:100%;font-size:14px;colir:#bababa;">您的职场信用评分为：</P>
                <p style="width:100%;font-size:14px;color:#32B6C6;font-weight: 600;">{{percent}}分</p>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-workpls">
            <div class="wid-widlacecre">
               <p style="font-size:14px;"> 职场信用评分有什么用？</p>
            </div>
            <div class="lacecre-wid">
                <p style="font-size:13px;color:#bababa">答：会对个人简历或公司推荐顺序产生一定影响</p>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-workpls">
            <div class="wid-widlacecre" style="border-bottom: 0px solid #f4f4f4;">
               <p style="font-size:14px;"> 完善个人基本信息可提高信用评分</p>
            </div>
            <div class="lacecre-wid">
               <button class="button-xno" @click="$router.push('/positionchange')">去完善</button>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-workpls">
            <div class="wid-widlacecre" style="border-bottom: 0px solid #f4f4f4;">
               <p style="font-size:14px;"> 完善个人简历概况可提高信用评分</p>
            </div>
            <div class="lacecre-wid">
               <button class="button-xno" @click="$router.push('/myresume')">去完善</button>
            </div>
        </div>
        <!-- <div class="background-workpplace">
            <div class="x-circle-coln">
                <x-circle :percent="percent/10"  :stroke-width="3" trail-color="#bd4e4d" anticlockwise="true" stroke-color="#f06161">
                    <div class="border-circle-clo">
                        <p>{{ percent }}</p>
                    </div>
                </x-circle>
            </div>
        </div>
        <div class="backgoungss" style="margin-top: 20px;">
            <p>您当前的信用评价良好请继续加油</p>
            <p>您当前的信用评价略低请努力提高您的评分</p>
            <p>您当前的信用评价很高请继续保持</p>
        </div> -->
    </view-box>
</template>

<script>
import { ViewBox, Box, XCircle, Group, Cell, CellBox, Divider, XHeader } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    XCircle,
    Group,
    Cell,
    CellBox,
    Divider,
    XHeader
  },
  data () {
    return {
      percent: 600
    }
  }
}
</script>
<style scoped>
.backgoungss{
  background: #fff;
}
.backgoungss p{
    text-align: center;
    text-align: left;
    padding-left: 12px;
    line-height: 30px;
}
    .background-workpplace{
        margin: 0;
        padding: 0;
        height: auto;
        position: relative;
    }
    .background-workpplace img{
        width: 100%;
        height: 100%;
    }
.myworkplace{
    position: absolute;
    top: 0;
    width: 100%;
    height:55px;
    display:flex;
}
.myworkplace span{
    font-size: 19px;
    color: #fff;
}
.x-circle-coln{
    width:90px;
    height:90px;
    margin: 10px;
}
    .vux-circle-demo > div {
        margin-left: auto;
        margin-right: auto;
    }
   .border-circle-clo{
       width: 70px;
       height: 70px;
       border: 1px dashed #32B6C6;
       background:#C2EAEF;
       text-align: center;
       opacity: 0.8;
       line-height: 70px;
       color: #32B6C6;
       margin-left: 10px;
       margin-top: 2px;
       border-radius: 154px
   }
    .creditnavigation{
        width: 94.4%;
        height: 69px;
        position: absolute;
        margin-left: 2.8%;
        top: 276px;
        border-radius: 5px;
        background: #fff;
        display: flex;
    }
    .border-workpls{
        width: 92%;
        margin-left: 4%;
        background:#fff;
        border-radius: 7px;
    }
    .lacecre-wid{
        width:92%;
        margin-left: 4%;
        height: auto;
        line-height: 50px;
    }
    .wid-lop{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    }
    .wid-widlacecre{
        width: 92%;
        margin-left: 4%;
        border-bottom: 1px solid #f4f4f4;
        height: 50px;
        line-height: 50px;
    }
    .button-xno{
        width: 80px;
        height: 40px;
        border-radius: 70px;
        background: #32B6C6;
        border:1px solid #32B6C6;
        color: #fff;
    }
</style>
<style>
.x-circle-coln path{
 stroke: #32B6C6 !important;
}
</style>